<template>
    <admin-container :loading="loading" title="编辑">
        <el-form label-width="120px" @submit.prevent.native="onSubmit">
            <el-form-item label="UID">
                <el-input :value="form.id" readonly/>
            </el-form-item>

            <el-form-item label="用户名">
                <el-input :value="form.username" readonly/>
            </el-form-item>

            <el-form-item label="昵称">
                <el-input v-model="form.nickname"/>
            </el-form-item>

            <el-row>
                <el-col :span="6">
                    <el-form-item label="年龄">
                        <el-input v-model="form.age"/>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="性别">
                        <el-radio-group v-model="form.sex">
                            <el-radio :label="0">女</el-radio>
                            <el-radio :label="1">男</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="6">
                    <el-form-item label="手机号码">
                        <el-input v-model="form.mobile"/>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="邮箱地址">
                        <el-input v-model="form.email"/>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item label="财产">
                余额：{{ form.money }}
                /
                积分：{{ form.score }}
            </el-form-item>


            <el-row>
                <el-col :span="6">
                    <el-form-item label="创建时间">
                        <el-input :value="form.create_time" readonly/>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="最后更新时间">
                        <el-input :value="form.update_time" readonly/>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item>
                <el-button type="primary" native-type="submit">保存</el-button>
            </el-form-item>
        </el-form>
    </admin-container>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import AdminContainer from '@/components/admin-container.vue';
import { editUser, getUser } from '@/services/users.service';
@Component({
    components: { AdminContainer }
})
export default class UserPost extends Vue {
    form: any = {};
    loading: boolean = false;

    get id(): number {
        return parseInt(this.$route.params.id);
    }

    async mounted() {
        this.loading = true;
        this.$setTitle(this.id ? '编辑用户信息' : '添加用户');
        await this.getInfo(this.id);
        this.loading = false;
    }

    // 获取用户信息
    async getInfo(id: number) {
        const result = await getUser(id);
        this.form = result.data;
    }

    // 修改信息
    onSubmit() {
        const load = this.$keLoading('提交中...');
        editUser(this.id, this.form)
            .then(() => {
                this.$message.success('修改成功');
            })
            .catch(err => {
                this.$message.error(err.response?.data?.message);
            })
            .finally(() => load.close());
    }
}
</script>
